<template>
  <div class="self_adaption">
    <p style="line-height: 50px; font-size: 16px; font-weight: bold" class="main_text">商品分组</p>
    <div class="group">
      <div class="group_left p16">
        <el-input size="small" placeholder="搜索分类"></el-input>
        <!-- 树状结构 -->
        <el-tree class="mt10" :data="data" :props="defaultProps" @node-click="handleNodeClick" />
      </div>
      <div class="group_right p16">
        <el-button size="small" type="primary">添加分类</el-button>
        <el-button size="small" type="primary" plain>导入分类</el-button>
        <el-button size="small" plain>...</el-button>
        <!-- 表格 -->
        <el-table
          :header-cell-style="{background: '#f2f7fc'}"
          class="mt10"
          ref="multipleTableRef"
          :data="tableData"
          style="width: 100%"
          @selection-change="handleSelectionChange"
          :show-overflow-tooltip="true">
          <el-table-column type="selection" width="55" />
          <el-table-column label="一级分类">
            <template #default="scope">{{ scope.row.oneClass }}</template>
          </el-table-column>
          <el-table-column property="towClass" label="二级分类" />
          <el-table-column property="Ctime" label="创建时间" />
          <el-table-column label="操作">
            <el-button size="small" type="primary" link>编辑</el-button>
            <!-- @confirm="del" -->
            <el-popconfirm title="你确定要删除吗？">
              <template #reference>
                <el-button size="small" type="danger" link>删除</el-button>
              </template>
            </el-popconfirm>
          </el-table-column>
        </el-table>
      </div>
    </div>
  </div>
</template>

<script setup lang="ts">
import {ref} from 'vue';
import {ElTable} from 'element-plus';
/* 树状结构 */
interface Tree {
  label: string;
  children?: Tree[];
}

const handleNodeClick = (data: Tree) => {
  console.log(data);
};

const data: Tree[] = [
  {
    label: 'Level one 1',
    children: [
      {
        label: 'Level two 1-1',
        children: [
          {
            label: 'Level three 1-1-1',
          },
        ],
      },
    ],
  },
  {
    label: 'Level one 2',
    children: [
      {
        label: 'Level two 2-1',
        children: [
          {
            label: 'Level three 2-1-1',
          },
        ],
      },
      {
        label: 'Level two 2-2',
        children: [
          {
            label: 'Level three 2-2-1',
          },
        ],
      },
    ],
  },
  {
    label: 'Level one 3',
    children: [
      {
        label: 'Level two 3-1',
        children: [
          {
            label: 'Level three 3-1-1',
          },
        ],
      },
      {
        label: 'Level two 3-2',
        children: [
          {
            label: 'Level three 3-2-1',
          },
        ],
      },
    ],
  },
];

const defaultProps = {
  children: 'children',
  label: 'label',
};

/* 表格数据 */

const multipleTableRef = ref<InstanceType<typeof ElTable>>();
const multipleSelection = ref<any>([]);
const handleSelectionChange = (val: any) => {
  multipleSelection.value = val;
};
const tableData = ref<any>([
  {
    oneClass: '一级分类',
    towClass: '二级分类',
    Ctime: '2016-05-03',
  },
  {
    oneClass: '一级分类',
    towClass: '二级分类',
    Ctime: '2016-05-03',
  },
  {
    oneClass: '一级分类',
    towClass: '二级分类',
    Ctime: '2016-05-03',
  },
]);
</script>

<style lang="scss" scoped>
.group {
  width: 100%;
  height: calc(100% - 3.125rem);
  display: flex;
  justify-content: space-between;

  .group_left {
    height: 100%;
    width: 20%;
    background-color: #fff;
  }

  .group_right {
    height: 100%;
    width: 79%;
    background-color: #fff;
  }
}

.el-table__header {
  color: red;
}
</style>
